<script setup>
import { reactive, ref } from 'vue';
import { registerService } from '../../api/login.js'
import { updateUserService } from '../../api/user.js'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '../../store/idnex.js'
import waterMarker from "../../components/sdq-watermarker/waterMarker.vue"
import { getWatermar } from '../../api/login.js'
	
	const watermarText = ref('')
	const isHide = ref(false)
	
	
	getWatermar().then(res => {
		if(!res.data.hide){
			watermarText.value = res.data.text
			isHide.value = true
		}
	})

	const useStore = useUserStore()
	const user = reactive(useStore.user)

	const pageState = ref('register')
	
	const form = ref({
		id: '',
		name: '',
		username: '',
		password: '',
		gender: '',
		height: '',
		weight: '',
		sugar: '',
		fat: '',
		address: ''
	})
	
	// 获取页面参数
	onLoad((options) => {
		pageState.value = options.state;
		if(options.state == 'update'){
			uni.setNavigationBarTitle({
				title:'个人信息'
			})
			form.value = user
			console.log(form.value);
		}
	})


	
	const genders = [
		{value: 0, text: '男'},
		{value: 1, text: '女'}
	]
	
	// 表单校验规则
	const rules = {
	  name: {
		rules: [
		  {
			required: true,
			errorMessage: '姓名不能为空'
		  }
		]
	  },
	  username: {
		rules: [
		  {
			required: true,
			errorMessage: '用户名不能为空'
		  }
		]
	  },
	  password: {
		rules: [
		  {
			required: true,
			errorMessage: '密码不能为空'
		  }
		]
	  },
	  gender: {
		rules: [
		  {
			required: true,
			errorMessage: '性别不能为空'
		  }
		]
	  },
	  height: {
		rules: [
		  {
			required: true,
			errorMessage: '身高不能为空'
		  },
		  {
			validateFunction: (rule, value, data, callback) => {
				const isNumber = /^\d+$/.test(value);
				if(!isNumber){
					callback('身高必须是数字')
				}
				return true;
			}
		  }
		]
	  },
	  weight: {
		rules: [
		  {
			required: true,
			errorMessage: '体重不能为空'
		  },
		  {
			validateFunction: (rule, value, data, callback) => {
				const isNumber = /^\d+$/.test(value);
				if(!isNumber){
					callback('体重必须是数字')
				}
				return true;
			}
		  }
		]
	  }
	};
	
	const registForm = ref(null)
	// 点击注册的事件
	const handleRegister = (registerForm) => {
		
		registForm.value.validate().then(res => {
			registerService(res).then(resp => {
				if(resp.code == 200){
					uni.showToast({
						title:'注册成功'
					})
					//重定向到登录页面
					setTimeout(() => {
						uni.navigateBack({
							url:'/pages/home/index'
						})
					}, 1000)
				}
			})
			// 校验通过，可以进行注册
		}).catch(err => {
			console.log('err' + err);
		})
	}
	
	// 点击保存，这个是修改
	const handleUpdate = (registerForm) => {
		console.log(form.value);
		registForm.value.validate().then(res => {
			updateUserService(form.value).then(resp => {
				if(resp.code == 200){
					// 修改成功，更新新的bim和状态
					form.value = resp.data
					// 保留2位小数
					form.value.bim = resp.data.bim.toFixed(2)
					// 设置进入仓库中
					useStore.setUser(form.value)
					uni.showToast({
						title:'修改成功'
					})
				}
			})
			// 校验通过，可以进行注册
		}).catch(err => {
			console.log('err' + err);
		})
		
	}
</script>

<template>
	<view class="container">
		
		<waterMarker v-if="isHide" col="4" row="8" :text="watermarText" opacity="0.1" color="black" rotate="-30deg"></waterMarker>
		
		
		<uni-forms ref="registForm" :modelValue="form" :rules="rules" validateTrigger="blur">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="用户名" required name="username">
				<uni-easyinput v-model="form.username" placeholder="请输入用户名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item v-if="pageState != 'update'" label="密码" required name="password">
				<uni-easyinput v-model="form.password" type="password" placeholder="请输入密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="性别" required name="gender">
				<uni-data-select style="background-color: white;" v-model="form.gender" :localdata="genders">
					
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="身高" required name="height">
				<uni-easyinput v-model="form.height" placeholder="请输入身高"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="体重/kg" required name="weight">
				<uni-easyinput v-model="form.weight" placeholder="请输入体重" ></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item v-if="pageState == 'update'" label="bim" required name="weight">
				<uni-easyinput style="color: black;" disabled v-model="form.bim" placeholder="请输入体重" ></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item v-if="pageState == 'update'" label="状态" required name="weight">
				<uni-easyinput style="color: black;" disabled v-model="form.bimRemake" placeholder="请输入体重" ></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item label="血糖">
				<uni-easyinput v-model="form.sugar" placeholder="请输入血糖" ></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item label="血脂">
				<uni-easyinput v-model="form.fat" placeholder="请输入血脂" ></uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item label="收货地址">
				<uni-easyinput v-model="form.address" placeholder="请输入收获地址" ></uni-easyinput>
			</uni-forms-item>
			
			<button v-if="pageState != 'update'" style="width: 80%;" type="primary" @click="handleRegister('registForm')">注册</button>
			<button v-else style="width: 80%;" type="primary" @click="handleUpdate('registForm')">保存</button>
		</uni-forms>
		
	<!-- 	<view class="user-inp">
			<view class="user-inp-item">
				<uni-easyinput  prefixIcon="person" v-model="username" placeholder="请输入账号"></uni-easyinput>
			</view>
			<view class="user-inp-item">
				<uni-easyinput  type="password"  prefixIcon="locked" v-model="password" placeholder="请输入密码"></uni-easyinput>
			</view>
		</view> -->
		
		
	</view>
</template>

<style scoped lang="scss">
	:deep(.uni-forms-item__content){
		background-color: white;
	}
	
	:deep(.uni-input-input){
		color: black;
	}
	
	.container {
		padding: 30rpx;
	}
	// .user-inp {
	// 	width: 100%;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// 	.user-inp-item {
	// 		// margin-top: 20rpx;
	// 	}
	// }
	
</style>
